<!-- <div id="chart" style="width: 800px; height: 500px"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<script>
  const chart = echarts.init(document.getElementById("chart"));
  chart.setOption({
    title: {
      text: "C++风格折线图",
      left: "center",
      textStyle: { fontSize: 16 },
    },
    grid: { top: 80, right: 30, bottom: 60, left: 50 },
    xAxis: {
      type: "category",
      name: "X轴",
      nameLocation: "end",
      axisLine: { lineStyle: { color: "#333" } },
      data: ["1月", "2月", "3月", "4月", "5月"],
    },
    yAxis: {
      type: "value",
      name: "Y轴",
      nameLocation: "end",
      axisLine: { show: true, lineStyle: { color: "#333" } },
      splitLine: { lineStyle: { type: "dashed" } }, // 虚线网格
    },
    series: [
      {
        name: "数据",
        type: "line",
        symbol: "circle", // 数据点样式
        symbolSize: 8,
        lineStyle: {
          width: 2,
          type: "solid", // 实线（可改为'dashed'/'dotted'）
        },
        itemStyle: { color: "#c23531" }, // 标记点颜色
        data: [12, 18, 15, 24, 20],
      },
    ],
    tooltip: { trigger: "axis" }, // 悬浮提示
  });
</script> -->

<!-- <!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="main" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  </body>
</html>
<script>
  var myChart = echarts.init(document.getElementById("main"));

  var option = {
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["温度", "湿度"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: [
      {
        type: "value",
        name: "温度",
        position: "left",
        alignTicks: true, // 对齐刻度，可选
        axisLine: {
          lineStyle: {
            color: "#3398DB", // 可以自定义轴线颜色，以便区分不同的 Y 轴
          },
        },
        axisLabel: {
          formatter: "{value} °C", // Y 轴标签格式化，例如显示摄氏度符号
        },
      },
      {
        type: "value",
        name: "温度",
        position: "right",
        alignTicks: true, // 对齐刻度，可选
        axisLine: {
          lineStyle: {
            color: "#3398DB", // 可以自定义轴线颜色，以便区分不同的 Y 轴
          },
        },
        axisLabel: {
          formatter: "{value} °C", // Y 轴标签格式化，例如显示摄氏度符号
        },
      },
    ],
    series: [
      {
        name: "温度",
        type: "line",
        smooth: true, // 使线条平滑
        data: [11, 11, 15, 13, 12, 13, 10], // 温度数据示例，单位：摄氏度
        yAxisIndex: 0, // 使用第一个 Y 轴（索引为 0）
      },
      {
        name: "湿度",
        type: "line",
        smooth: true, // 使线条平滑
        data: [11, 11, 15, 13, 12, 13, 10], // 湿度数据示例，单位：百分比
        yAxisIndex: 1, // 使用第二个 Y 轴（索引为 1）
      },
    ],
  };

  myChart.setOption(option);
</script> -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts 全局与局部比例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
      #main,
      #overview {
        width: 1000px;
        height: 400px;
        margin: 0 auto;
      }
      #overview {
        height: 150px;
        margin-top: 20px;
      }
      .container {
        margin: 30px auto;
        width: 1000px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="main"></div>
      <div id="overview"></div>
    </div>

    <script>
      // 基于准备好的dom，初始化echarts实例
      const mainChart = echarts.init(document.getElementById("main"));
      const overviewChart = echarts.init(document.getElementById("overview"));

      // 生成模拟数据
      function generateData() {
        let data = [];
        let now = new Date();
        let value = Math.random() * 1000;

        for (let i = 0; i < 1000; i++) {
          data.push({
            name: now.toString(),
            value: [
              [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
              Math.round(value),
            ],
          });

          value = value + Math.random() * 21 - 10;
          now = new Date(now.getTime() + 24 * 3600 * 1000);
        }

        return data;
      }

      const data = generateData();
      const dates = data.map((item) => item.value[0]);
      const values = data.map((item) => item.value[1]);

      // 主图表配置
      const mainOption = {
        title: {
          text: "详细数据视图（局部）",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return params[0].axisValue + "<br/>" + "值: " + params[0].data[1];
          },
        },
        xAxis: {
          type: "category",
          data: dates,
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "10%"],
        },
        dataZoom: [
          {
            type: "inside",
            start: 50,
            end: 100,
          },
          {
            start: 50,
            end: 100,
          },
        ],
        series: [
          {
            name: "数据",
            type: "line",
            showSymbol: false,
            data: data.map((item) => item.value),
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(58, 77, 233, 0.8)" },
                { offset: 1, color: "rgba(58, 77, 233, 0.1)" },
              ]),
            },
            lineStyle: {
              color: "#3a4de9",
            },
          },
        ],
      };

      // 概览图表配置
      const overviewOption = {
        title: {
          text: "全局数据概览",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            return params[0].axisValue + "<br/>" + "值: " + params[0].data[1];
          },
        },
        grid: {
          height: 80,
          top: 40,
        },
        xAxis: {
          type: "category",
          data: dates,
          boundaryGap: false,
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          show: false,
          boundaryGap: [0, "10%"],
        },
        dataZoom: {
          type: "slider",
          height: 10,
          bottom: 10,
          start: 50,
          end: 100,
          handleIcon:
            "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
          handleSize: "80%",
        },
        series: [
          {
            name: "数据",
            type: "line",
            showSymbol: false,
            data: data.map((item) => item.value),
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(233, 58, 58, 0.8)" },
                { offset: 1, color: "rgba(233, 58, 58, 0.1)" },
              ]),
            },
            lineStyle: {
              color: "#e93a3a",
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表
      mainChart.setOption(mainOption);
      overviewChart.setOption(overviewOption);

      // 联动两个图表
      mainChart.on("dataZoom", function (params) {
        const option = mainChart.getOption();
        const startValue = option.dataZoom[0].startValue;
        const endValue = option.dataZoom[0].endValue;

        overviewChart.dispatchAction({
          type: "dataZoom",
          startValue: startValue,
          endValue: endValue,
        });
      });

      overviewChart.on("dataZoom", function (params) {
        const option = overviewChart.getOption();
        const startValue = option.dataZoom[0].startValue;
        const endValue = option.dataZoom[0].endValue;

        mainChart.dispatchAction({
          type: "dataZoom",
          startValue: startValue,
          endValue: endValue,
        });
      });
    </script>
  </body>
</html>
